<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>匠心独创</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="../css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../css/animate.css" type="text/css" />
  <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="../css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="../css/font.css" type="text/css" />
  <link rel="stylesheet" href="../css/app.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
    <![endif]-->
  <style type="text/css">
    .code {
      background-image:url("../images/a0.png");
      font-family: Arial;
      font-style: italic;
      color: Red;
      border: 0;
      padding: 2px 3px;
      letter-spacing: 3px;
      font-weight: bolder;
    }
    .unchanged {
      border: 0;
    }
  </style>
</head>
<body class="bg-info dker" onload="createCode()">
  <section id="content" class="m-t-lg wrapper-md animated fadeInDown">
    <div class="container aside-xl">
      <a class="navbar-brand block" href="index.html"><span class="h1 font-bold">Do It Yourself</span></a>
      <section class="m-b-lg">
        <header class="wrapper text-center">
          <strong></strong>
        </header>
        <form action="index.html">
          <div class="form-group">
            <input placeholder="姓名" class="form-control rounded input-lg text-center no-border">
          </div>
          <div class="form-group">
            <input type="email" placeholder="邮箱" class="form-control rounded input-lg text-center no-border">
          </div>
          <div class="form-group">
             <input type="password" placeholder="密码" class="form-control rounded input-lg text-center no-border">
          </div>
          <input type="text" id="input1" placeholder="验证码" class="  rounded text-center no-border m-xs" style="height: 40px;width: 200px;"/> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
          <div class="checkbox i-checks m-b">
            <label class="m-l">
              <input type="checkbox" checked=""><i></i>同意并接受  <a href="singup_aggrement.html" class="userAggrement" >匠心用户协议</a>
            </label>
          </div>
          <button type="submit" onclick="validate();"  class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded"><i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">注册</span></button>
          <div class="line line-dashed"></div>
          <p class="text-muted text-center"><small>已经注册</small></p>
          <a href="signin.html" class="btn btn-lg btn-info btn-block btn-rounded">登陆</a>
        </form>
      </section>
    </div>
  </section>
  <!-- footer -->
  <footer id="footer">
    <div class="text-center padder clearfix">
      <p>
        <small></small>
      </p>
    </div>
  </footer>
  <!-- / footer -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script>
  <script src="js/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/app.plugin.js"></script>
  <script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/demo.js"></script>
  <script language="javascript" type="text/javascript">
    var code; //在全局 定义验证码
    function createCode() {
      code = "";
      var codeLength = 6;//验证码的长度
      var checkCode = document.getElementById("checkCode");
      var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的

      for (var i = 0; i < codeLength; i++) {
        var charIndex = Math.floor(Math.random() * 36);
        code += selectChar[charIndex];
      }
      //alert(code);
      if (checkCode) {
        checkCode.className = "code";
        checkCode.value = code;
      }
    }

    function validate() {
      var inputCode = document.getElementById("input1").value;
      if (inputCode.length <= 0) {
        alert("请输入验证码！");
      } else if (inputCode != code) {
        alert("验证码输入错误！");
        createCode();//刷新验证码
      } else {
        alert("验证码成功");
      }
    }
  </script>
</body>
</html>